在經過前兩天簡單的介紹 Cypress，現在我想透過一個實際的範例來讓大家更加了解 Cypress 以及到底如何攥寫 E2E 測試。

• Vue3 E2E Testing: Cypress 基本介紹
• Vue3 E2E Testing: Cypress 基本結構

我們這次測試的目標網站是非常經典的 TodoMVC ，不過為了呼應 Vue 的主題，所以我會拿 Vue.js • TodoMVC 當作測試的目標網站。

大家可以透過連結自由操作一下，會對於接下來的測試例子更佳有感！

Test Cases

以下是這次測試的案例規劃：

• Case 1: 初始狀態
  • Case 1-1: 初始狀態下，無任何 Todo。
  • Case 1-2: 初始狀態下，Todo 清單以及 Footer 將會隱藏。
• Case 2: 新增 Todo
  • Case 2-1 可以新增一至多個 Todo。
  • Case 2-2: Todo 新增完後，輸入框的文字會被清除。
  • Case 2-3: Todo 會被新增至清單的最後一個。
  • Case 2-4: 當有 Todo 新增後，Todo 清單以及 Footer 將會顯示。
• Case 3: 編輯 Todo
  • Case 3-1: 對 Todo 連擊兩下後進入編輯模式，並在 blur 時完成編輯。
  • Case 3-2: 如果編輯後的 Todo 為空內容，則自動刪除。
• Case 4: 改變 Todo 狀態
  • Case 4-1: 可以一一將 Todo 標示為完成。
  • Case 4-2: 可以一一將完成的 Todo 標示為未完成。
  • Case 4-3: 可以一次將所有 Todo 標示為完成。
  • Case 4-4: 可以一次將所有完成的 Todo 標示為未元成。
• Case 5: 刪除 Todo
  • Case 5-1: 可以一一將 Todo 刪除。
  • Case 5-2: 可以一次將標示為完成的 Todo 刪除。

我大部分是參考 TodoMVC 原作者所攥寫的 E2E 測試，並從中挑選重要的核心操作來示範撰寫測試，如果想瞭解涵蓋率 100% 的 TodoMVC E2E 測試可以去查看原作的 Source Code。

實務上 E2E 測試也不常達到 100%，因為 E2E 所要花費的成本是所有測試類型中最高的，而且通常在涵蓋率達到 60~70 % 後測試的效益就會大幅降地 (成本太大)，也因此通常僅會為產品的核心功能攥寫 E2E 測試。

Case 1: 初始狀態

• Case 1-1: 初始狀態下，無任何 Todo。
• Case 1-2: 初始狀態下，Todo 清單以及 Footer 將會隱藏。

describe('Todo MVC', () => {
  context('Case 1: Initial State', () => {
    beforeEach(() => {
      cy.visit('https://todomvc.com/examples/vue')
    })
    it('Case 1-1: start with zero todo item', () => {
      cy.get('.todo-list .todo').should('have.length', 0)
    })
    it('Case 1-2: hide .main and .footer', () => {
      cy.get('.main').should('not.be.visible')
      cy.get('.footer').should('not.be.visible')
    })
  })
})

語法說明：

• visit(): 訪問瀏覽目標 URL，基本上每一條測試都是使用 visit 到目標頁面開始測試。
• get(): get() 使用和 Document.querySelector() 一樣的語法，如果有成功找到目標元素就會回傳目標元素，如果超過 retry 時間仍沒有找到目標元素則會報錯導致測試失敗。
• should(): should 可以傳入來自 Chai, Chai-jQuery 或 Sinon-Chai 的 Chainer，並且創建一個不斷自動重試的斷言，直到通過或超時。
• beforeEach(): 在區塊中的每個測試開始之前會執行的 hook。

Console output

在控制台中可以看到 Cypress 輸出的資訊，點擊 Command Log 中的每一行命令都可以看到當時的樣貌以及 console 資訊，來幫助我們開發或是除錯

• Command（已發出的命令）
• Yieled（此命令返回的內容）
• Elements（找到的元素數量）
• Selector（我們使用的選擇器）

參考資料

• Testing Vue web applications with Vuex data store & REST backend
• Vue.js • TodoMVC
• cypress-example-recipes/ui-spec.js at master · cypress-io/cypress-example-recipes
• TodoMVC
• Writing Your First Test | Cypress Documentation

今天的分享就到這邊，如果大家對我分享的內容有興趣歡迎點擊追蹤 & 訂閱系列文章，如果對內容有任何疑問，或是文章內容有錯誤，都非常歡迎留言討論或指教的！

我們明天見！